<template>
  <div class="database">
    <div class="content-box">
      <div class="bar-box">
        <div class="view-header"><div>
          <span>项目年度统计</span>
        </div>
          <div>
            <a-select default-value="lucy" style="width: 100px" >
              <a-select-option value="jack">
                2000
              </a-select-option>
              <a-select-option value="lucy">
                2021
              </a-select-option>

              <a-select-option value="Yiminghe">
                2022
              </a-select-option>
            </a-select>
          </div>
        </div>
        <div class="view"></div>
      </div>
      <div class="map-box">
        <div class="view-header">
          <div>
            <span>项目区域位置</span>
          </div>
        </div>
        <div class="view"></div>
      </div>
    </div>
    <div class="table-box">
      <div class="view-header"><div><span>项目列表汇总</span></div></div>
      <div class="view">
        <div class="table-view-header">
          <a-input-search placeholder="请输入关键字" enter-button @search="onSearch" />
          <a-radio-group v-model="query.status" button-style="solid">
            <a-radio-button v-for="item in filterList" :key="item.value" :value="item.value">{{item.text}}</a-radio-button>
          </a-radio-group>
        </div>
        <div class="table-view-table">
          <a-table :columns="columns" height="400" bordered :data-source="tableData" />
        </div>
        <div class="table-view-page">
          <a-pagination v-model="query.pageNum" :total="query.total" show-less-items />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Table",
  data(){
    return{
      columns:[
        {
          title:'经营单位名称',
          dataIndex: 'name',
          key: 'name',
          align:'center',
        },
        {
          title:'完工日期',
          dataIndex: 'time',
          key: 'time',
          width:220,
          align:'center',
        },
        {
          title:'省市区',
          dataIndex: 'city',
          key: 'city',
          align:'center',

        },
        {
          title:'状态',
          dataIndex: 'status',
          key: 'status',
          width:180,
          align:'center',
        },
        {
          title:'操作',
          width:220,
          dataIndex: 'operate',
          key: 'operate',
          align:'center',

        },
      ],
      tableData:[],
      filterList:[
        {
          text: '全部',
          value: '0',
        },
        {
          text: '已清洗',
          value: '1',
        },
        {
          text: '即将过期',
          value: '2',
        },
        {
          text: '已过期',
          value: '3',
        },
      ],
      query:{
        query:'',
        status:'0',
        pageSize:10,
        pageNum:1,
        total:0,
      },
    }
  },
  methods:{
    onSearch(){

    }
  }
}
</script>

<style lang="scss" scoped>
.database{
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  >div{
    flex: 1;
  }
  .view-header{
    display: flex;
    >div:first-child{
      font-weight: bolder;
      margin-left: 5px;
      span{
        border-left: #106ec4 3px solid;
        padding-left: 5px;
      }
    }
  }
  .content-box{
    display: flex;
    >div{
      flex: 1;
      margin: 10px;
      border-radius: 5px;
      background-color: white;
      padding: 10px;
    }
  }
  .table-box{
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    background-color: white;
  }
  .table-view-header{
    .ant-input-search{
      width: 260px;
      margin-right: 10px;
    }
  }
  .table-view-page{
    display: flex;
    justify-content: flex-end;
  }
  .table-view-table{
    flex: 1;
    overflow: auto;
    margin: 10px 0;
  }
  .bar-box,.map-box,.table-box{
    display: flex;
    flex-direction: column;
    .view{
      flex: 1;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>